<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">

    <!-- Bootstrap CSS -->
    <link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" rel="stylesheet">

    <title>Printer Test</title>
</head>
<body>
<main class="container" role="main">
    <h1 class="mt-5">Printer Test</h1>

    <hr/>

    <label>PDF by URL</label>
    <div class="input-group mb-3">
        <input class="form-control" id="url" type="text" value="https://tcpdf.org/files/examples/example_002.pdf"/>
    </div>

    <label>Status</label>
    <input class="form-control" id="status"/>

    <div class="py-2">
        <p>
            <button class="btn btn-success" onclick="printPDF()">Normal Print</button>
        </p>
        <p>
            <button class="btn btn-primary" onclick="printPDFWithFallback()">Print (With Fallback)</button>
            Fallback to window.open() if WebApp Hardware Bridge is not running.
        </p>
        <p>
            <button class="btn btn-secondary" onclick="printPDFWithId()">Print (With id)</button>
            If &quot;id&quot; is submitted, it will be echoed back in onUpdate() thus we can trace back to jobs we
            submitted
        </p>
        <p>
            <button class="btn btn-info" onclick="printPDFWithQty()">Print (With Qty)</button>
            <input class="form-control" id="qty" type="number" value="3"/>
            If &quot;qty&quot; is submitted, specified copies of documents will be printed.
        </p>
    </div>
</main>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="websocket-printer.js"></script>
<script>
    var printService = new WebSocketPrinter({
        onConnect: function () {
            $('#status').val('Connected');
        },
        onDisconnect: function () {
            $('#status').val('Disconnected');
        },
        onUpdate: function (message) {
            $('#status').val(message);
        },
    });

    function printPDF() {
        printService.submit({
            'type': 'INVOICE',
            'url': $('#url').val()
        });
    }

    function printPDFWithId() {
        printService.submit({
            'type': 'INVOICE',
            'id': new Date().getTime(),
            'url': $('#url').val()
        });
    }

    function printPDFWithQty() {
        printService.submit({
            'type': 'INVOICE',
            'qty': $('#qty').val(),
            'url': $('#url').val()
        });
    }


    function printPDFWithFallback() {
        if (printService.isConnected()) {
            printPDF();
        } else {
            alert('WebApp Hardware Bridge not running');
            window.open($('#url').val());
        }
    }
</script>
</body>
</html>